<template>
	<view class="refund-page">
		<!-- 页面头部 -->

		<!-- 极速退款提示 -->
		<view class="quick-refund-tip">
			<text>因您信誉良好 尊享: <text class="highlight">极速退款</text></text>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-goods">
				<image class="goods-img" :src="orderInfo.orderGoodsList[0].picUrl || '/static/images/default-goods.png'"
					mode="aspectFill"></image>
				<view class="goods-details">
					<text class="goods-name">{{ orderInfo.orderGoodsList[0].goodsName || '商品名称' }}</text>
					<text class="goods-specifications">{{ orderInfo.orderGoodsList[0].specifications || '规格型号' }}</text>
					<text class="goods-attr">共 {{ orderInfo.orderGoodsList[0].number || '1' }} 件商品</text>
				</view>
			</view>

			<view class="order-summary">
				<view class="summary-item">
					<text class="label">订单编号：</text>
					<text class="value">{{ orderInfo.orderSn || '暂无订单编号' }}</text>
				</view>
				<view class="summary-item">
					<text class="label">申请类型：</text>
					<text class="value">{{ refundTypeText }}</text>
				</view>
			</view>
		</view>

		<!-- 退款表单 -->
		<view class="refund-form">
			<!-- 退款原因 -->
			<view class="form-item">
				<view class="form-label">申请原因</view>
				<view class="reason-select">
					<picker mode="selector" :range="refundReasons" range-key="text" v-model="selectedReasonIndex">
						<view class="picker-content">
							{{ refundReasons[selectedReasonIndex].text }}
							<text class="iconfont icon-arrow-right">→</text>
						</view>
					</picker>
				</view>
			</view>

			<!-- 退款金额 -->
			<view class="form-item">
				<view class="form-label">申请金额</view>
				<view class="amount-display">
					<text class="currency">¥</text>
					<text class="amount">{{ orderInfo.actualPrice || '0.00' }}</text>
				</view>
			</view>

			<!-- 申请说明 -->
			<view class="form-item">
				<view class="form-label">申请说明</view>
				<view class="remark-container">
					<textarea class="remark-input" v-model="refundRemark" placeholder="请详细填写申请说明"
						maxlength="200"></textarea>
					<view class="char-count">
						<text>{{ refundRemark.length }}/200</text>
					</view>
				</view>
			</view>

			<!-- 上传图片 -->
			<view class="form-item">
				<view class="form-label">上传图片</view>
				<view class="image-upload">
					<view class="upload-tip">最多上传5张图片，支持JPG、PNG格式</view>
					<view class="image-list">
						<view v-for="(img, index) in uploadedImages" :key="index" class="image-item">
							<image :src="img" mode="aspectFill" class="uploaded-img"></image>
							<view class="delete-btn" @click="deleteImage(index)">
								<text class="iconfont icon-delete">🗑️</text>
							</view>
						</view>
						<view class="upload-btn" @click="chooseImage">
							<text class="iconfont icon-upload">📤</text>
							<text>上传图片</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 联系电话 -->
			<view class="form-item">
				<view class="form-label">联系电话</view>
				<view class="phone-container">
					<input class="phone-input" v-model="contactPhone" type="number" placeholder="请输入联系电话"
						maxlength="11">
				</view>
			</view>
			<view class="footers"></view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitRefund">
			提交申请
		</view>
	</view>
</template>

<script>
	import { getRefund } from '@/config/api/order.js';
	
	export default {
		data() {
			return {
				orderInfo: {}, // 订单信息
				refundType: 'REFUND_WITHOUT_RETURN', // 退款类型：默认无需退货
				refundTypeText: '我要退款(无需退货)', // 退款类型文本
				refundReasons: [{
						value: 'TOO_EXPENSIVE',
						text: '价格太贵'
					},
					{
						value: 'WRONG_GOODS',
						text: '收到的商品与描述不符'
					},
					{
						value: 'QUALITY_PROBLEM',
						text: '商品质量问题'
					},
					{
						value: 'DAMAGED_GOODS',
						text: '商品破损/污渍'
					},
					{
						value: 'WRONG_COLOR',
						text: '颜色/尺寸/款式不符'
					},
					{
						value: 'DUPLICATE_ORDER',
						text: '重复下单'
					},
					{
						value: 'CHANGE_MIND',
						text: '不想要了/拍错了'
					},
					{
						value: 'OTHER_REASON',
						text: '其他原因'
					}
				],
				selectedReasonIndex: 0, // 选择的退款原因索引
				refundRemark: '', // 退款说明
				uploadedImages: [], // 上传的图片列表
				contactPhone: '', // 联系电话
			}
		},
		onLoad(options) {
			const itemArray = JSON.parse(options.item);
			this.orderInfo = itemArray.length > 0 ? itemArray[0] : {};
			this.contactPhone = this.orderInfo.mobile || '';
			// console.log(JSON.stringify(this.orderInfo, null, 2));
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 选择退款原因
			selectReason(reason) {
				this.selectedReasonIndex = reason.index;
			},

			// 选择图片
			chooseImage() {
				if (this.uploadedImages.length >= 5) {
					uni.showToast({
						title: '最多只能上传5张图片',
						icon: 'none'
					});
					return;
				}

				uni.chooseImage({
					count: 5 - this.uploadedImages.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.uploadedImages = this.uploadedImages.concat(res.tempFilePaths);
					}
				});
			},

			// 删除图片
			deleteImage(index) {
				this.uploadedImages.splice(index, 1);
			},

			// 提交退款申请
			async submitRefund() {
				// 表单验证
				if (!this.refundReasons[this.selectedReasonIndex].value) {
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none'
					});
					return;
				}
				
				const phoneRegex = /^1[3-9]\d{9}$/;
					if (!phoneRegex.test(this.contactPhone)) {
						uni.showToast({
							title: '请输入有效的手机号码',
							icon: 'none'
						});
						return;
					}
				let refundReason = encodeURIComponent(JSON.stringify(this.refundReasons[this.selectedReasonIndex].text));
				// 构建退款申请数据
				// hasPicture: this.uploadedImages.length > 0 ? 1 : 0,
				// picUrls: this.uploadedImages.map(img => decodeURIComponent(img)).join(','),
				const params = {
				    orderId: this.orderInfo.id,
				    orderSn: this.orderInfo.orderSn,
				    refundReason: this.refundReasons[this.selectedReasonIndex].text,
				    hasPicture:this.uploadedImages.length > 0 ? 1 : 0,
				    picUrls: '',
				    status: 0,
				    mobile: this.contactPhone
				  };
				
				console.log(JSON.stringify(params, null, 2));

				uni.showLoading({
					title: '提交中...'
				});
				
				try {
					const refundRes = await getRefund(params)
					if (refundRes && refundRes.data && typeof refundRes.data === 'object' && 'code' in refundRes.data && refundRes.data.code ===
						200) {
						console.log("成功!");
					} else {
						console.error('请求失败:', refundRes?.data?.msg || '未知错误');
					}
				} catch (error) {
					console.error('接口异常:', error)
					this.$message.error('数据加载失败')
				}
				
				
			},

			
		}
	}
</script>

<style lang="scss" scoped>	
	/* 全局样式重置 */
	page {
		font-size: 14px;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
		color: #333;
		background-color: #f5f5f5;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.refund-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
		padding-bottom: 20rpx;
	}

	/* 页面头部样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		background-color: #e54d42;
		color: #fff;
		font-size: 18px;
		position: relative;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.back-btn {
		position: absolute;
		left: 15px;
		font-size: 20px;
		display: flex;
		align-items: center;
	}

	.title {
		font-weight: bold;
	}

	/* 极速退款提示 */
	.quick-refund-tip {
		height: 36px;
		line-height: 36px;
		background-color: #fff8e1;
		color: #ff9800;
		font-size: 14px;
		padding-left: 15px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.highlight {
		font-weight: bold;
		margin: 0 5px;
	}

	/* 订单信息区域 */
	.order-info {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.order-goods {
		display: flex;
		padding-bottom: 15px;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 15px;
	}

	.goods-img {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		margin-right: 10px;
		background-color: #f8f8f8;
	}

	.goods-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 16px;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 5px;
	}

	.goods-specifications {
		font-size: 13px;
		color: #999;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 5px;
	}

	.goods-attr {
		font-size: 13px;
		color: #666;
	}

	.order-summary {
		padding-top: 10px;
	}

	.summary-item {
		display: flex;
		align-items: center;
		height: 36px;
		font-size: 14px;
		color: #666;
	}

	.label {
		width: 80px;
		color: #666;
	}

	.value {
		flex: 1;
		color: #333;
		text-align: right;
		font-size: 14px;
	}

	/* 退款表单区域 */
	.refund-form {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.form-item {
		margin-bottom: 15px;
	}

	.form-label {
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.reason-select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding-right: 15px;
		border-radius: 4px;
		background-color: #f5f5f5;
		font-size: 14px;
		color: #666;
		border: 1px solid #e0e0e0;
	}

	.picker-content {
		display: flex;
		align-items: center;
	}

	.icon-arrow-right {
		margin-left: 10px;
		font-size: 14px;
	}

	.amount-display {
		height: 44px;
		line-height: 44px;
		padding-right: 15px;
		border-radius: 4px;
		background-color: #f5f5f5;
		font-size: 18px;
		color: #e54d42;
		display: flex;
		align-items: center;
		border: 1px solid #e0e0e0;
	}

	.currency {
		font-size: 14px;
		margin-right: 5px;
	}

	.amount {
		font-weight: bold;
	}

	.remark-container {
		position: relative;
	}

	.remark-input {
		width: 100%;
		height: 120px;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		font-size: 14px;
		color: #333;
		background-color: #f9f9f9;
		resize: none;
	}

	/* 修复被截断的样式 */
	.char-count {
	  position: absolute;
	  right: 10px;
	  bottom: 10px;
	  font-size: 12px;
	  color: #999;
	}
	.image-upload {
	  .upload-tip {
	    font-size: 12px;
	    color: #999;
	    margin-bottom: 10rpx;
	  }
	  
	  .image-list {
	    display: flex;
	    flex-wrap: wrap;
	    
	    .image-item {
	      position: relative;
	      width: 150rpx;
	      height: 150rpx;
	      margin-right: 20rpx;
	      margin-bottom: 20rpx;
	      
	      .uploaded-img {
	        width: 100%;
	        height: 100%;
	        border-radius: 8rpx;
	      }
	      
	      .delete-btn {
	        position: absolute;
	        top: -10rpx;
	        right: -10rpx;
	        width: 40rpx;
	        height: 40rpx;
	        background: #e54d42;
	        border-radius: 50%;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        color: white;
	      }
	    }
	    
	    .upload-btn {
	      width: 150rpx;
	      height: 150rpx;
	      border: 1px dashed #ccc;
	      border-radius: 8rpx;
	      display: flex;
	      flex-direction: column;
	      align-items: center;
	      justify-content: center;
	      color: #666;
	      font-size: 12px;
	    }
	  }
	}
	
	.phone-container {
	  .phone-input {
	    height: 88rpx;
	    padding: 0 20rpx;
	    background: #f5f5f5;
	    border-radius: 8rpx;
	    border: 1px solid #e0e0e0;
	  }
	}
	
	.submit-btn {
	  position: fixed;
	  bottom: 40rpx;
	  left: 20rpx;
	  right: 20rpx;
	  height: 90rpx;
	  background: #e54d42;
	  color: white;
	  border-radius: 45rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 32rpx;
	  z-index: 10;
	  box-shadow: 0 4rpx 12rpx rgba(229, 77, 66, 0.3);
	}
	.footers{
		margin-bottom: 60px;
	}
</style>
	
	